<template>
  <div class="recommend">
    <i class="el-icon-close recommend-close" @click="close"></i>
    <h1 class="recommend-title tc">我的推荐</h1>
    <div class="recommend-content">
      <div class="content_one clearfloat">
        <div class="fl left">
          <span>邀请二维码</span>
        </div>
        <div id="qrcode" class="fr">
          <canvas ref="qrcode" class='qrcodeBox'></canvas>
        </div>
      </div>
      <div class="content_two clearfloat">
        <div class="fl left">
          <span>邀请码</span>
        </div>
        <div class="fr right">
          <span class="inviteCode">{{$store.state.user.invitation_code}}</span>
          <el-popover
            placement="top"
            width="500"
            content="您可以将您的推荐码发送给您的朋友，只需要您的朋友在注册时填入即可"
            trigger="hover">
            <i class='el-icon-info orange ml10' slot="reference"></i>
          </el-popover>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode"; // 引入qrcode
export default {
  data () {
    return {
      qrcodeURL: `http://m.mingyukehui.com/preRegiest?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}`,
    }
  },
  mounted () {
    this.createQrCode(
      "qrcode",
      this.qrcodeURL
    );
  },
  methods: {
    createQrCode(refName, payUrl) {
      QRCode.toDataURL(this.$refs[refName], payUrl, {
        width: 100,
        height: 100,
        margin: 0
      })
        .then(url => {})
        .catch(err => {
          // this.openMessage(0, '生成二维码失败')
        });
    },
    close () {
      this.$router.push({path:'/agent/home/menu'})
    }
  }
}
</script>

<style lang='less'>
  .recommend {
    width: 100%;
    height: 100%;
    padding-top: 60px;
    background: #fff;
    position: relative;
    &-close {
      font-size: 25px;
      position: absolute;
      right: 30px;
      top: 30px;
      cursor: pointer;
    }
    &-title {
      margin-bottom: 60px;
      font-size: 20px;
    }
    &-content {
      padding: 0 60px;
      box-sizing: border-box;
      .left {
       font-size: 15px;
       position: relative;
       ::before {
         content: '1';
         width: 30px;
         height: 30px;
         position: absolute;
         left: 0;
         display: inline-block;
         color: #58a5ea;
         border: 2px solid #58a5ea;
         box-sizing: border-box;
         border-radius: 50%;
         text-align: center;
         line-height: 28px;
       }
       span {
         margin-left: 50px;
         color:rgba(57,57,57,1);
         line-height: 30px;
       }
      }
      .content_one {
        height: 100px;
        
        #qrcode {
          width: 100px;
          height: 100px;
          
        }
      }
      .content_two {
        margin-top: 50px;
        .left {
          ::before {
            content: '2';
          }
        }
        .inviteCode {
          line-height: 30px;
          font-size:20px;
          font-family:Source Han Sans CN;
          font-weight:bold;
          color:rgba(36,157,255,1);
        }
        .el-icon-info {
          font-size: 18px;
          line-height: 30px;
        }
        .right {
          span {
            height: 30px;
            display:inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>